<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      将组件当成函数来看待，
        函数可以多次调用，组件也是可以多次使用的。

      期望函数多次调用有不同的逻辑，则需要给函数传递参数
      期望组件多次调用有不同的效果，则需求给组件传递参数【prop】

      给组件传递Props

        1. 在组件内，通过 props 选项，先声明

        2. 在使用组件，在组件的开始标签上传递属性即可。

     -->

    <div id="app">
      <hello name="张三" :age="18"></hello>

      <hello name="里斯" :age="19"></hello>

      <hello name="王五" :age="20"></hello>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({});

      // hello
      // Hello
      app.component("Hello", {
        // 声明组件会接受到prop列表
        //    这些 prop 可以在当前组件的模板中直接使用，也可以在 this 上点出来
        props: ["name", "age"],

        template: `
          <div>
            <p>欢迎你, {{ name }}</p>
            <button>年龄：{{ age }}</button>
          </div>
        `,

        created() {
          console.log("Hello 组件 创建完成", this.name);
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
